:root{
  --special-background: #56AB6E;
  --radius-width: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-light: #142030;
    --color-light-light: #203656;
    --color-light-contrast: #ffffff;
    --color-dark: #ffffff;
    --color-dark-light: #ffffff;
    --color-dark-contrast: #203656;
    --border-color: rgba(235, 235, 235, .2);
    --border-color-light: rgba(235, 235, 235, .05);
    //背景色
    --background: #142030;
    --light-background: #203656;
    --hover-background: rgba(255,255,255,.03);
  }
  .elem-dark {
    display: none;
  }
  .elem-light {
    display: inherit;
  }
}

/* SSO单点登陆会员基础系统模块 基础登陆 */
.sso-outlet{
  .sso-container{
    width: 1000px;
    margin: 0 auto;
  }
  .sso-header{
    padding: 15px 0 45px 0;
    background: #56AB6E;
    --color-primary: rgba(255, 255, 255, 1);
    --color-primary-light: rgba(255, 255, 255, .8);
    --color-primary-contrast: #145b28;
    --color-base-contrast: #ffffff;
    color: var(--color-base-contrast);
    --border-color: rgba(255,255,255,.5);
    .sso-form{
      width: 300px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      .sso-form-scroller{
        width: 200%;
        display: flex;
        flex-flow: row;
        transition: 300ms;
        .sso-form-main, .sso-verify-code{
          padding: 20px;
          flex: 1;
        }
        &.verify{
          transform: translateX(-50%);
        }
      }
      .sso-avatar{
        width: 58px;
        height: 58px;
        font-size: 36px;
        display: flex;
        justify-content: center;
        flex-flow: column;
        background: rgba(255,255,255,.5);
        border-radius: 50%;
        margin: 0 auto;
      }
      .iui.input{
        input{width: 50px;}
        input::placeholder{color: rgba(255,255,255,.5);}
      }
      //验证码
      .sso-verify-code{
        display: flex;
        flex-flow: column;
        .v-code-main{
          flex: 1;
          display: flex;
          flex-flow: column;
          justify-content: center;
          .v-code-image{
            img{width: 100%;display: block;border-radius: var(--radius-width);cursor: pointer;}
          }
        }
      }
    }
  }
  .sso-main{
    padding: 50px 0;
  }
}